<template>
  <div>
    <!-- 顶部导航栏 -->
    <div class="top1">
      <!-- 系统图标和名称 -->
      <div class="logo">
        <div class="logo-icon">
          <div class="cube">
            <div class="front"></div>
            <div class="back"></div>
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
          </div>
          <div class="scan-line"></div>
        </div>
        <span class="title">第三方物流仓库管理系统</span>
      </div>
      <!-- 用户相关操作 -->
      <div class="user-actions">
        <span class="user" @click="handleShowInfo">个人中心</span>
        <div class="userimg">
          <el-avatar :src="imageUrl"></el-avatar>
        </div>
        <el-button type="info" round @click="handleLogout">退出</el-button>
      </div>
    </div>
    <!-- 新增个人信息弹窗 -->
    <el-dialog
        title="个人信息"
        :visible.sync="dialogVisible"
        width="500px"
        class="user-info-dialog"
    >
      <div class="info-content">
        <div class="info-item">
          <span class="label">登录账号：</span>
          <span class="value">{{ userInfo.username || '未设置' }}</span>
        </div>
        <div class="info-item">
          <span class="label">姓名：</span>
          <span class="value">{{ userInfo.name || '未设置' }}</span>
        </div>
        <div class="info-item">
          <span class="label">联系电话：</span>
          <span class="value">{{ userInfo.phone || '未设置' }}</span>
        </div>
        <div class="info-item">
          <span class="label">所属角色：</span>
          <span class="value">{{ roleNames[userInfo.roleId] || '未知角色' }}</span>
        </div>
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </template>
    </el-dialog>


    <!-- 页面主体容器 -->
    <el-container style="height: calc(100vh - 80px); border: none">
      <!-- 左侧菜单栏 -->
      <el-aside width="220px">
        <el-menu router :default-openeds="['0']" :default-active="activeMenu" mode="vertical" background-color="#001529" text-color="#a7b1c2" active-text-color="#1890ff">
          <el-submenu index="0">
            <template #title>
              <i class="el-icon-s-home"></i>
              <span>系统管理</span>
            </template>
            <!-- 根据角色动态生成菜单项 -->
            <el-menu-item v-if="hasPermission('/home')" index="/home">
              <i class="el-icon-s-data"></i>
              <span>首页</span>
            </el-menu-item>
            <el-menu-item v-if="hasPermission('/user')" index="/user">
              <i class="el-icon-user-solid"></i>
              <span>用户管理</span>
            </el-menu-item>
            <el-menu-item v-if="hasPermission('/goods')" index="/goods">
              <i class="el-icon-box"></i>
              <span>货物信息</span>
            </el-menu-item>
            <el-menu-item v-if="hasPermission('/cost')" index="/cost">
              <i class="el-icon-money"></i>
              <span>收费详情</span>
            </el-menu-item>
            <el-menu-item v-if="hasPermission('/client')" index="/client">
              <i class="el-icon-user-solid"></i>
              <span>客户信息</span>
            </el-menu-item>
            <el-menu-item v-if="hasPermission('/cargo')" index="/cargo">
              <i class="el-icon-money"></i>
              <span>货物信息</span>
            </el-menu-item>
            <el-menu-item v-if="hasPermission('/int')" index="/int">
              <i class="el-icon-money"></i>
              <span>入库记录表</span>
            </el-menu-item>
            <el-menu-item v-if="hasPermission('/warehouse')" index="/warehouse">
              <i class="el-icon-receiving"></i>
              <span>仓库信息</span>
            </el-menu-item>
            <el-menu-item v-if="hasPermission('/out')" index="/out">
              <i class="el-icon-money"></i>
              <span>出库记录表</span>
            </el-menu-item>
            <el-menu-item v-if="hasPermission('/relocation')" index="/relocation">
              <i class="el-icon-money"></i>
              <span>移库记录表</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 主要内容区域 -->
      <el-main style="background-color: #f0f2f5; padding: 20px">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,  // 控制弹窗显示
      // 头像图片路径
      imageUrl: require('@/assets/user.jpg'),
      // 角色权限映射
      rolePermissions: {
        1: ['/home', '/user', '/cargo', '/cost', '/client','/int','/warehouse','/out','/relocation'],
        2: ['/home','/user'],
        3:['/home','/goods', '/cost', '/client'],
        4:['/warehouse','int','/out','/relocation']
      },
      // 角色名称映射
      roleNames: {
        1: '领导',
        2: '系统管理员',
        3: '业务员',
        4: '仓库管理员'
      }
    };
  },
  computed: {
    // 获取当前路由路径，用于高亮菜单项
    activeMenu() {
      return this.$route.path;
    },
    // 获取当前用户角色ID
    currentRoleId() {
      return localStorage.getItem('roleId');
    },
    // 新增用户信息计算属性
    userInfo() {
      try {
        return JSON.parse(localStorage.getItem('userInfo')) || {};
      } catch (e) {
        return {};
      }
    }
  },
  methods: {
    handleShowInfo() {
      if (!this.userInfo.username) {
        this.$message.warning('用户信息获取失败');
        return;
      }
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.dialogVisible = false;
      done();
    },
    // 处理退出登录操作
    handleLogout() {
      // 清除本地存储的 token、用户信息和角色ID
      localStorage.removeItem('token');
      localStorage.removeItem('userInfo');
      localStorage.removeItem('roleId');
      // 跳转到登录页面
      this.$router.push('/login');
    },
    // 检查角色是否有某个权限
    hasPermission(path) {
      const roleId =localStorage.getItem('roleId');
      if (roleId && this.rolePermissions[roleId]) {
        return this.rolePermissions[roleId].includes(path);
      }
      return false;
    }
  }
};
</script>

<style scoped>

.user-info-dialog {
  margin-top: 20vh !important;
}

.info-item {
  display: flex;
  align-items: center;
  margin: 15px 0;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.label {
  font-weight: 600;
  color: #606266;
  min-width: 80px;
  margin-right: 20px;
}

.value {
  color: #409EFF;
  flex-grow: 1;
  word-break: break-all;
}

/* 全局样式重置 */
body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}


/* 用户相关操作样式 */
.user-actions {
  display: flex;
  align-items: center;
}

.user {
  margin-right: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.user:hover {
  color: #00d2ff;
}

.userimg {
  margin-right: 20px;
}

.el-avatar {
  border: 2px solid rgba(0, 210, 255, 0.5);
  transition: all 0.3s;
}

.el-avatar:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(0, 210, 255, 0.5);
}

/* 退出按钮样式 */
.el-button--info {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  transition: all 0.3s;
}

.el-button--info:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #00d2ff;
  color: #00d2ff;
  transform: translateY(-2px);
}

/* 左侧菜单栏样式 - 科技感设计 */
.el-aside {
  background-color: #001529;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}

.el-menu {
  border-right: none;
}

.el-menu-item, .el-submenu__title {
  padding: 0 20px !important;
  height: 48px;
  line-height: 48px;
  margin: 4px 0;
  transition: all 0.3s;
}

.el-menu-item i, .el-submenu__title i {
  margin-right: 12px;
  font-size: 18px;
}

.el-menu-item:hover, .el-submenu__title:hover {
  background-color: rgba(24, 144, 255, 0.1) !important;
}

.el-menu-item.is-active {
  background-color: rgba(24, 144, 255, 0.2) !important;
  position: relative;
}

.el-menu-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: linear-gradient(to bottom, #1890ff, #00d2ff);
}

/* 主要内容区域样式 */
.el-main {
  overflow-y: auto;
  background-color: #f0f2f5;
}


/* 顶部导航栏样式 - 科技感设计 */
.top1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100px;
  background: linear-gradient(135deg, #1a2a6c, #3a7bd5);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 0 30px;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}

/* 顶部导航栏发光效果 */
.top1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 150, 255, 0.5), transparent);
}

/* 顶部导航栏样式 */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  position: relative;
  width: 40px;
  height: 40px;
  perspective: 1000px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 8s infinite linear;
}

.cube div {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #3a7bd5, #00d2ff);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 10px rgba(58, 123, 213, 0.5);
}

.cube .front { transform: translateZ(20px); }
.cube .back { transform: translateZ(-20px); }
.cube .left { transform: rotateY(-90deg) translateZ(20px); }
.cube .right { transform: rotateY(90deg) translateZ(20px); }
.cube .top { transform: rotateX(90deg) translateZ(20px); }
.cube .bottom { transform: rotateX(-90deg) translateZ(20px); }

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 210, 255, 0.8), transparent);
  animation: scan 2s infinite linear;
  box-shadow: 0 0 10px #00d2ff;
}

@keyframes rotate {
  0% { transform: rotateX(0) rotateY(0); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

@keyframes scan {
  0% { top: -10px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.logo .title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1px;
  background: linear-gradient(to right, #fff, #00d2ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>